<template>
  <div class="home" ref="home">
    <div class="home-scroll">
      <van-search @focus="handleFocus" v-if="!opacity" placeholder="汽车用品" @click="toSearch" style="background:transparent;" class="search-box"/>
      <!-- 下拉刷新数据 -->
      <!-- 轮播图广告 -->
      <Swiper/>
      <!-- 热门推荐 -->
      <div class="recommend-line">
        <span>热门推荐</span>
      </div>
      <!--<van-cell-group>
        <van-cell title="热门推荐" is-link @click.native="handleClick" class="recommend"/>
      </van-cell-group>-->
      <!--热门推荐-->
      <div class="item_box">
        <ul class="item_list">
          <li v-for="(item, index) in list" v-bind:key="index">
            <router-link :to="{path: 'item/detail', query: {goodsId: item.goodsId}}" >
              <div class="similar-product">
                <div class="similar-posre list-img">
                  <img v-lazy="GLOBAL.baseImagePath + item.picUrl"/>
                </div>
                <span class="similar-product-text">{{item.name}}</span>
                <p class="similar-product-info">
                <span class="similar-product-price">
                  <span>¥</span>
                  <span class="big-price">{{item.salePrice}}</span>
                </span>
                  <span class="similar-product-num">销量：{{item.sales === null ? 0 : item.sales}}</span>
                </p>
              </div>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
    <!-- 引入公共底部 -->
    <TabBar/>
    <!-- 返回顶部 -->
    <GoTop/>
  </div>
</template>
<script>
import GoTop from '../../components/common/GoTop.vue'
import TabBar from '../../components/common/TabBar.vue'
import Swiper from '../../components/index/Swiper.vue'
import homeApi from '../../api/home'
import BetterScroll from 'better-scroll'
export default {
  name: 'home',
  data () {
    return {
      list: [],
      scrollY: 0,
      opacity: false,
      loading: false,
      finished: false,
      offset: 1,
      isLoading: false
    }
  },
  components: {
    GoTop,
    TabBar,
    Swiper
  },
  created () {
    this.getHotRecommend()
    // this.$nextTick(() => {
    //   this.initScroll()
    // })
    // window.addEventListener('scroll', this.handleScroll)
  },
  mounted () {
    this.initScroll()
  },
  methods: {
    initScroll: function () {
      this.scrolls = new BetterScroll(this.$refs.home, {
        click: true,
        probeType: 3
      })
      // 阻止下拉
      this.scrolls.on('scroll', (pos) => {
        if (pos.y > 0) {
          this.scrolls.scrollTo(0, 0)
        }
      })
    },
    // 下拉刷新数据
    onRefresh () {
      setTimeout(() => {
        this.getHotRecommend()
        this.isLoading = false
      }, 500)
    },
    handleScroll () {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop > 45) {
        this.opacity = true
      } else {
        this.opacity = false
      }
    },
    getHotRecommend: function () {
      const _this = this
      homeApi.getHotRecommend().then(function (res) {
        _this.list = res.data.re
      })
    },
    handleClick: function () {
      this.$router.push('/classify')
    },
    handleFocus: function () {
      document.activeElement.blur()
    },
    toSearch: function () {
      this.$router.push('/search')
    }
  }
}
</script>
<style scoped>
  .home {
    height: 100%;
    /*overflow-y: hidden;*/
  }
  .search-box {
    position: absolute;
    top: 0;
    z-index: 100;
    width: 100%;
    opacity: 0.6;
    padding: 7px 20px;
    /*background-color:transparent;*/
  }

  .search-box-normal {
    background: #1ABC9C!important;
  }

  .search-box-fixed {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.2) !important;
  }
  .search-normal {
    top: 44px;
  }

  .search-fixed {
    top: 0px;
  }

  .recommend-line {
    position: relative;
    display: -webkit-box;
    padding: 4px 0;
    color: #848689;
    font-size: 14px;
    -webkit-box-pack: center;
  }
  .recommend-line:after {
    content: "";
    height: 1px;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    background-color: #cbcbcb;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
  }
  .recommend-line span {
    padding: 0 10px;
    z-index: 10;
    position: relative;
    display: block;
    background-color: #fafafa;
  }
  .item_box {
    width: 100%;
    display: inline-block;
    margin-top: 2px;
    margin-bottom: 45px;
  }

  .item_list {
  }

  .item_list li {
    float: left;
    width: 50%;
    box-sizing: border-box;
    padding-bottom: 4px;
    position: relative
  }

  .item_list li:nth-child(2n+1) {
    padding-right: 2px
  }

  .item_list li:nth-child(2n) {
    padding-left: 2px
  }

  .similar-product {
    background-color: #fff;
    font-size: 0
  }

  .similar-product img {
    width: 100%;
    display: block
  }

  .similar-product-text {
    box-sizing: border-box;
    height: 31px;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
    color: #232326;
    margin-top: 5px;
    line-height: 16px;
    margin-bottom: 3px;
    padding: 0 4px
  }

  .similar-product-info {
    height: 25px;
    font-size: 13px;
    overflow: hidden;
    margin: 0;
    padding: 5px 2px;
  }

  .similar-product-price {
    color: #f23030;
    display: inline-block;
    padding: 0 5px 0 4px;
    height: 25px;
    line-height: 25px
  }

  .similar-product-num {
    color: rgb(153, 153, 153);
    float: right;
    height: 25px;
    line-height: 25px;
  }

  .similar-product-price .big-price {
    font-size: 16px
  }

  .list-img {
    width: 100%;
    position: relative;
    overflow: hidden;
    padding-bottom: 100%;
  }

  .list-img img {
    position: absolute;
    margin: 2%;
    width: 96%;
  }
</style>
